<template>
  <Card>
    <p slot="title">
      代付通道
    </p>
    <i-table :columns="allColumns" :data="newdata">

    </i-table>
  </Card>
</template>

<script>
  let testData = {
    histories: [{
        id: '14',
        bankname: '银行',
        accountname: '二',
        banknumber: '123',
        blance: '10000',
        persion: '人工003',
        staus: '开启',
        isdefault: 0,
      },{
        id: '14',
        bankname: '银行',
        accountname: '二',
        banknumber: '123',
        blance: '10000',
        persion: '人工003',
        staus: '开启',
        isdefault: 1,
      },
      {
        id: '15',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        persion: '人工003',
        staus: '开启',
        isdefault: 1,
      },{
        id: '15',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        persion: '人工003',
        staus: '开启',
        isdefault: 1,
      },
      {
        id: '16',
        bankname: '招商银行',
        accountname: '二硕',
        banknumber: '12345689',
        blance: '10000',
        isdefault: 1,
        persion: '人工003',
        staus: '开启',
      }
    ]

  };
  const isDefault = {
    0: {
      value: 0,
      name: '是',
      color:'#FF5722',
    },
    1: {
      value: 1,
      name: '否',
      color: '#009688'
    }
  };
  export default {
    name: 'pay-way',
    data() {
      return {
        newdata:testData.histories,
        allColumns: [
          {
            title: '通道id',
            key: 'bankname'
          },
          {
            title: '通道名称',
            key: 'accountname'
          },
          {
            title: '代付费率',
            key: 'banknumber'
          },
          {
            title: '单笔限额',
            key: 'blance'
          },
          {
            title: '状态',
            key: 'staus'
          },
          {
            title: '默认',
            key: 'isdefault',
            render: (h, params) => {
              return h('Tag', {
                slot: 'context',
                props: {
                  color: this.formatStatus(params.row.isdefault, isDefault).color
                }
              }, this.formatStatus(params.row.isdefault, isDefault).name)
            }
          }

        ],

      }
    },
  methods:{
    // 是否默认的状态
    formatStatus(value, status) {
      return status[value] || {value: '', name: ''};
    },
  },
  }
</script>

<style>
  .ivu-card-head {
    position: relative;
  }

  .ivu-card-head::after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 70px;
    border-bottom: 2px solid #5FB878;
  }
</style>
